<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--bootstrap前端框架-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!--jquery页面高级操作-->
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <style>
        div.container {
            width: 100%;
            height: 100%;
        }

        div.loginDiv {
            width: 398px;
            height: 500px;
            background: lightgray;
            margin: 50px auto;
            border: 1px solid lightgray;
        }

        div.login-top {
            height: 165px;
            margin-bottom: 1.5rem;
            text-align: center;
            margin-top: 45px;
            color: white;
        }

        span.login-title {
            font-size: 24px;
        }

        div .login-pic {
            height: 110px;
            width: 100%;
            margin: 40px auto;
            font-size: 15px;
        }

        div .login-form {
            text-align: center;
            margin-top: 60px;
        }

        div .login-form input {
            width: 300px;
            margin: 0px auto;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container">
    <div class="loginDiv">
        <div class="login-top">
            <h3>电梯人员信息录入系统</h3>
            <div class="login-pic">
                <img src="https://account.cnblogs.com/assets/img/sign-in-avatar.svg" width="78px" height="78px"/><br>
                <span id="ErrorMsg" th:text="${msg}" class="help-block"></span>
            </div>
        </div>
        <div class="login-form">
            <form action="/dologin" method="post">
                <input type="text" placeholder="登录用户名" id="username" name="username" class="form-control"><br>
                <input type="password" id="password" placeholder="密码" name="password" class="form-control"><br>
                <input type="submit" id="submitBtn" value="登录" class="form-control"
                       style="width:70px;background:#007bff;color:white;">
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        /**
         * 校验用户名格式
         */
        $("#username").change(function () {
            //准备正则表达式
            var regName = /^[\u2E80-\u9FFFa-zA-Z0-9_-]{2,12}$/;
            var content = $(this).val();
            //校验用户名
            if (!regName.test(content)) {
                $("#ErrorMsg").text("用户名只能是2-12位中文，数字或字母的组合");
                $("#ErrorMsg").css("color", "red");
                $("#submitBtn").attr("nameError", "true");
            } else {
                $("#ErrorMsg").text("");
                $("#submitBtn").attr("nameError", "false");
            }
        });

        /**
         * 校验密码格式
         */
        $("#password").change(function () {
            //准备正则表达式
            var regPassword = /^[0-9a-zA-Z!@#$%^&*]{4,16}$/;
            var content = $(this).val();
            //校验密码
            if (!regPassword.test(content)) {
                $("#ErrorMsg").text("密码只能是4-16位数字，字母或特殊字符的组合");
                $("#ErrorMsg").css("color", "red");
                $("#submitBtn").attr("pwdError", "true");
            } else {
                $("#ErrorMsg").text("");
                $("#submitBtn").attr("pwdError", "false");
            }
        });

        /**
         * 点击提交按钮
         */
        $("#submitBtn").click(function () {
            //用户名密码非空判断
            if ($("#username").val().lenght == 0 || $("#password").val().length == 0) {
                $("#ErrorMsg").text("用户名密码不能为空！");
                $("#ErrorMsg").css("color", "red");
                return false;
            }
            if ($(this).attr("nameError") == "true") {
                $("#ErrorMsg").text("用户名只能是2-12位中文，数字或字母的组合");
                return false;
            }
            if ($(this).attr("pwdError") == "true") {
                $("#ErrorMsg").text("密码只能是4-16位数字，字母或特殊字符的组合");
                return false;
            }
            return true;
        });
    });
</script>
</body>
</html>